<template>
  <!-- 导入基本数据 -->
  <a-modal
    :visible="importExeclVisible"
    title="银行回单待确认数据"
    centered
    :closable="false"
    width="80%"
    dialogClass="member-execl-dialog"
    @cancel="importExeclVisible = false"
  >
    <ImportExeclPreview
      :execlData="execlData"
      :isMember="isMember"
      ref="ImportExeclPreview"
    />
    <section slot="footer">
      <a-button @click="importExeclVisible = false">取消</a-button>
      <a-button
        type="primary"
        :loading="importExeclConfirmLoading"
        @click="handlerConfirmImport"
        >{{ isPreview ? '待上传文件内容已确认' : '确认导入' }}</a-button
      >
    </section>
  </a-modal>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { ImportExecl } from '@/utils/execl'
import { famerServices, IMember } from '@/common/services/famer'
import ImportExeclPreview from './ImportExeclPreview.vue'
import ImportErrors from './ImportErrors.vue'
import { message, Modal } from 'ant-design-vue'
import { BUSINESS_CODE } from '@/api/interceptors'
import { isIDCard } from '@/utils/tools'
import { payServices } from '@/common/services/pay'
import { userModule } from '@/store/modules/user'

@Component({
  components: {
    ImportExeclPreview,
    ImportErrors,
  },
})
export default class MemberImportMixin extends Vue {
  @Prop({
    type: Boolean,
    default: false,
  })
  public isPreview!: boolean

  get isLarge() {
    return userModule.isLarge
    
  }

  get isPlant() {
    return userModule.isPlant
  }

  // 上传execl
  public importExeclVisible = false
  public importExeclConfirmLoading = false
  public execlData: any[] = []
  public file!: File
  public isMember: boolean = true
  public handlerUploadExecl(isMember: boolean) {
    const _self = this
    this.isMember = isMember
    let fields: Record<string, string> = {
      commit_id: '兑付批次号',
      member_id: this.isPlant ? '农户(大户)编号' : ((this.isLarge ? '大户' : '农户') + '编号'),
      member_nam: this.isPlant ? '户主(大户)姓名' : (this.isLarge ? '大户名称' : '户主姓名'),
      s_a_nam_all: '所在乡镇村社',
      member_sfz: (this.isPlant || this.isLarge) ? '证件号码' : '身份证号',
      
      // bank_nam: '所属银行',
      bt_size: '补贴面积(亩)',
      pay_price_total: '补贴金额(元)',

      bk_user: '收款户名',
      bk_bid: '收款身份证件号',
      bk_num: '收款账号',
      bk_nam: '开户银行',
      
      bk_op: '兑付银行(行号)',
      bk_time: '兑付时刻',
      bk_read: '银行备注(兑付失败原因等)',
      bk_price: '兑付状态',
    }
    ImportExecl(fields, (data, map) => {
      // 提取表头信息
      const [first, second] = data.slice(0, 2)
      let tempFields = Object.assign({}, first,  {} || second)

      for (const i in tempFields) {
        let value = tempFields[i];
        tempFields[value] = i;
        delete tempFields[i];
      }

      for (const i in fields) {
        const hasKey = tempFields[fields[i]]
        if (hasKey) {
          fields[i] = hasKey
        }
      }

      return {
        fields: fields,
        data: data.slice(2)
      }
    }).then((_) => {
      this.importExeclVisible = true
      // @ts-ignore
      this.execlData = this.formatIDCardError(_.formatedData) || []
      console.log('execlData', this.execlData)
      // @ts-ignore
      this.file = _.file
    })
  }

  public formatIDCardError(data: any[]) {
    return data.map((item) => {
      if (!isIDCard(item.member_sfz)) {
        return {
          ...item,
          error: true,
        }
      }
      return item
    })
  }

  public async handlerConfirmImport() {
    // @ts-ignore
    const data = this.$refs.ImportExeclPreview.execlData
    if (!data.length) {
      message.error('请导入数据')
      return false
    }

    // 预览模式下直接返回数据 + 关闭
    if (this.isPreview) {
      this.$emit('previewSuccess', {
        data,
        file: this.file,
      })
      this.importExeclVisible = false
      return
    }

    this.importExeclConfirmLoading = true
    // @ts-ignore
    payServices.setBankReceipt({
        data,
        file_nam: this.file.name
      })
      .then((_) => {
        const res = _.data
        if (res.code === BUSINESS_CODE.SUCCESS) {
          Modal.success({
            content: res.data || '数据导入成功',
            centered: true,
          })
        } else {
          if (typeof res.msg === 'string') {
            message.error({
              content: res.msg
            })
          } else {
            this.$dialog(
              ImportErrors,
              {
                messages: (res.msg as string[]).map((str) => ({ content: str })),
              },
              {
                title: '异常数据列表',
                width: '60%',
                footer: null,
              }
            )
          }
        }
      })
      .finally(() => {
        this.importExeclVisible = false
        this.importExeclConfirmLoading = false
      })
  }
}
</script>

<style lang="less" scoped>
.member-container {
  display: flex;
  .area-tree {
    width: 300px;
    flex: none;
    background-color: #fff;
    border-right: 1px solid #eee;
    margin-right: 10px;
  }
}
.house-holder /deep/ .ant-card-body {
  max-height: 600px;
  height: auto;
}
.member-list {
  display: flex;
  flex-direction: column;
}
</style>
